<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" placeholder="项目名称"></el-input>
        </el-form-item>

        <el-form-item label="立项人">
          <el-input v-model="form.created_user" placeholder="立项人"></el-input>
        </el-form-item>

        <el-form-item label="流水号">
          <el-input v-model="form.batch_id" placeholder="流水号"></el-input>
        </el-form-item>

        <el-form-item label="审批状态">
          <el-select v-model="form.status" placeholder="审批状态"  @change="onSubmit">

            <el-option :label="status" :value="k" v-for="(status,k) in projectLx.status_list" :key="k"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="项目时间">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main style="margin-top: 50px;">
      <el-table
        :data="projectLx.list"
        tooltip-effect="dark"
        style="width: 100%;"
      >
        <el-table-column label="流水号" prop="batch_id"></el-table-column>batch_id
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="立项人" prop="leader"></el-table-column>
        <el-table-column label="项目报价" prop="offer"></el-table-column>
        <el-table-column label="项目成本" prop="cost"></el-table-column>
        <el-table-column label="项目时间" prop="date"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
           <div class="frow fcenter" style="align-items: flex-end;">
              <div v-if="!form.status">
                <el-badge is-dot class="item">
                  <el-button type="primary" size="mini" @click="editProjectLx(scope.row)">编辑</el-button>
                </el-badge>
              </div>
            <div v-else ><el-button type="primary" size="mini" @click="editProjectLx(scope.row)" >编辑</el-button></div>
            <div style="margin-left: 10px;"><el-button type="danger" size="mini" @click="delProjectLx(scope.row)">删除</el-button></div>
           </div>
          </template>
        </el-table-column>

      </el-table>
    </el-main>

    <el-footer>
<!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="projectLx.total">
      </el-pagination>
    </el-footer>

  </el-container>

</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import {delProject} from '@/apilist/Project'
  import {delNote} from "../../apilist/Note";
    export default {
        name: "project_list_lx",
        data(){
            return {
                form: {
                    name: '',
                    created_user: '',
                    status: 0,
                    date: '',
                    batch_id: '',
                    start: '',
                    stop: '',
                    page: 1,
                    page_size: 10,
                },
            }
        },
        computed:{
            ...mapState("ProjectData",["projectLx"]),
        },
        methods:{
            ...mapActions("ProjectData",["getProjectLxActions"]),

            onSubmit(){

                if(this.form.date.length){
                    this.form.start = this.form.date[0]
                    this.form.stop = this.form.date[1]
                }
                this.getProjectLxActions(this.form)
            },
            editProjectLx(row){
                //console.log(row);return ;
              this.$router.push({
                  path: '/project_lx/edit',
                  query:{id: row.id},
              })
            },

            delProjectLx(row){
              this.$confirm('此操作将永久删除该备注, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                delProject({id: row.id, type: 'lx'}).then(res => {
                  if(res.state == 'ok') {
                    this.$message(
                      {type: 'success',
                        message: res.msg,
                        onClose: ()=>{
                          this.onSubmit();
                        }
                      }
                    )
                  }
                });
              }).catch(() => {

              });
            },

            handleSizeChange(val){
                this.form.page_size = val
                this.onSubmit();
            },
            handleCurrentChange(val){
                 this.form.page = val
                this.onSubmit();
            },

        },

        mounted() {

          this.getProjectLxActions(this.form)
        }
    }
</script>

<style scoped>
  .item{margin-top: 5px;}
</style>
